<template>
  <div class="event-list">
    <div class="news2_1" v-for="(event, index) in this.events" :key="index" style="margin-left:0px;">
      <div class="newsimg" @click="toEventDetail(event.eventId)">
        <a href="#" style="text-decoration: none">
          <img :src="event.eventPic" width="280" height="316"/>
        </a>
      </div>
      <div class="newstitle" @click="toEventDetail(event.eventId)"><a href="#" style="text-decoration: none">{{ event.eventTitle }}</a></div>
      <div class="newstime">{{ event.modifyTime | formatDate }}</div>
      <div class="newsdes" v-html="event.eventContent"></div>
      <div class="newsmore" @click="toEventDetail(event.eventId)" style="margin-top: 10px;">
        <a href="">
          <img src="src/assets/images/more.jpg" width="13" height="11"/>
          查看详细
        </a>
      </div>
    </div>
  </div>
</template>

<script>
// 活动及品牌新闻列表的公共模板
import { formatTimeToStr } from '../../utils/data'
import { getEvents } from '../../api'
export default {
  name: 'SubList',
  data () {
    return {
      events: [
        {
          deleted: 1,
          eventContent: '',
          eventId: 1,
          eventPic: '',
          eventTitle: '',
          eventType: 1,
          modifyTime: '',
          productId: 65
        }
      ]
    }
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time !== '') {
        const date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    }
  },
  created () {
    this.getEventList()
  },
  methods: {
    getEventList () {
      getEvents().then(({ data }) => {
        if (data.code === 0) {
          this.events = data.data
        } else {
          this.$message.error(data.msg)
        }
      }).catch(res => {
        console.log(res)
      })
    },
    toEventDetail (eventId) {
      this.$router.push({ path: '/eventAndNews/eventAndNewsDetail/' + eventId })
    }
  }
}
</script>

<style scoped lang="less">
.event-list {
  .news2_1 {
    width: 314px;
    height: 515px;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid #e7e7e7;
    float: left;
    font-size: 12px;
    margin: 10px 9px;
    padding: 15px;
    display: inline;
    background: #fff;
    color: #444444;
    a {
      text-decoration: none;
    }
    .newstitle {
      padding-top: 10px;
      a {
        color: #444444;
        font-weight: bold;
      }
    }

    .newstime {
      font-weight: bold;
      padding-bottom: 10px;
      border-bottom: 1px dotted #b2b2b2;
      padding-top: 10px;
    }

    .newsdes {
      width: 280px;
      height: 70px;
      overflow: hidden;
      color: #666666;
      line-height: 19px;
      margin-top: 8px;
    }

    .newsmore {
      a {
        text-decoration: none;
        color: #91a3cf;
      }
    }

  }
}
</style>
